<script setup>
import {useStore} from "vuex";

const store = useStore()
function fetchForum(id) {
  for (let type of store.state.forum.types) {
    if (type.id === id) {
      return type;
    }
  }
}
defineProps({
  type: null
})
</script>

<template>
  <div class="topic-type"
       :style="{
                       'color': fetchForum(type)?.color + 'EE',
                       'border-color': fetchForum(type)?.color + 'DD',
                       'background': fetchForum(type)?.color + '22'
                     }">
    {{ fetchForum(type)?.name }}
  </div>
</template>

<style scoped>
.topic-type {
           display: inline-block;
           border: solid 1px grey;
           border-radius: 3px;
           font-size: 12px;
           padding: 0 5px;
           height: 18px;
         }
</style>